<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bbb-leave {
            opacity: 1;
        }

        .bbb-leave-active {
            transition: opacity 2s;
        }

        .bbb-leave-to {
            opacity: 0;
        }

        .bbb-enter {
            opacity: 0;
        }

        .bbb-enter-active {
            transition: opacity 2s;
        }

        .bbb-enter-to {
            opacity: 1;
        }

        .aaa-leave {
            opacity: 1;
        }

        .aaa-leave-active {
            transition: opacity 3s;
        }

        .aaa-leave-to {
            opacity: 0;
        }

        .aaa-enter {
            opacity: 0;
        }

        .aaa-enter-active {
            transition: opacity 3s;
        }

        .aaa-enter-to {
            opacity: 1;
        }
    </style>
</head>

<body>
    <!--
        1. vue动画的理解
        操作css的trasition或animation
        vue会给目标元素添加/移除特定的class
        2. 基本过渡动画的编码
        1). 在目标元素外包裹<transition name="xxx">
        2). 定义class样式
            1>. 指定过渡样式: transition
            2>. 指定隐藏时的样式: opacity/其它
        3. 过渡的类名
        xxx-enter-active: 指定显示的transition
        xxx-leave-active: 指定隐藏的transition
        xxx-enter: 指定隐藏时的样式
    -->

    <div id="app">
        <!-- 点击按钮出现过渡效果 -->
        <button @click='isShow=!isShow'>显示/隐藏</button>
        <transition name='bbb'>
            <div v-show='isShow'>{{text}}</div>
        </transition>
        <transition name='aaa'>
            <div v-show='isShow'>{{text}}</div>
        </transition>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                text: '尚硅谷',
                isShow: true
            },
        })
    </script>
</body>

</html>